import React, { useState, useRef, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Button, message, Modal } from 'antd';
import { ProFormUploadButton } from '@ant-design/pro-form';
import { queryBrand, addBrand, updateBrand, removeBrand } from '@/services/ant-design-pro/apis';
// import CreateBrand from "./component/CreateBrand";
import UpdateBrand from './component/UpdateBrand';

const BizType = (props) => {
  const actionRef = useRef();
  const [selRows, setSelRows] = useState();
  const [createModalVisible, handleModalVisible] = useState(false);
  const [updateModalVisible, handleUpdteModalVisible] = useState(false);
  const [stepFormVals, setStepFormVals] = useState();
  const [exportModalVisible, handleExportModalVisible] = useState(false);
  const param = {};

  // const handleDel = async (record) => {
  //     Modal.confirm({
  //         title: '删除分类',
  //         content: '确认删除分类？',
  //         okText: '确认',
  //         cancelText: '取消',
  //         onOk: async () => {
  //             const hide = message.loading('正在删除');
  //            try{
  //             await removeBrand({ id: record.id })
  //             hide();
  //             message.success('删除成功');
  //             actionRef.current.reload();
  //            }catch(error){
  //             hide();
  //             message.error('删除失败请重试！');
  //             return false;
  //            }
  //         }
  //     })
  // }

  // const handleAdd = async (value) =>{
  //     const hide = message.loading("正在添加");
  //     try{
  //         await addBrand({...value})
  //         hide();
  //         handleModalVisible(false);
  //         message.success("添加成功");
  //         actionRef.current.reload();
  //         return true;
  //     }catch(error){
  //         hide();
  //         message.error("添加失败")
  //         return false;
  //     }
  // }

  const handleUpdate = async (value) => {
    const hide = message.loading('正在配置');
    try {
      await updateBrand({ ...value });
      hide();
      handleUpdteModalVisible(false);
      setStepFormVals(undefined);
      message.success('配置成功');
      actionRef.current.reload();
    } catch (error) {
      hide();
      message.error('配置失败');
    }
  };

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      hideInSearch: true,
      hideInForm: false,
    },
    {
      title: '品牌id',
      dataIndex: 'brandId',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '分类名称是必须项',
          },
        ],
      },
    },
    {
      title: '品牌名称',
      dataIndex: 'brandName',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '分类名称是必须项',
          },
        ],
      },
    },
    {
      title: '产品图片',
      dataIndex: 'brandImg',
      hideInSearch: true,
      render: (text, record) => <img src={text} alt="品牌图片" width="40px" height="40px" />,
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        ENABLE: {
          text: '启用',
          status: 'Success',
        },
        FORBIDDEN: {
          text: '禁用',
          status: 'Error',
        },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="edit"
          onClick={() => {
            setStepFormVals(record);
            handleUpdteModalVisible(true);
          }}
        >
          配置
        </a>,
        // <a key="delete" onClick={()=>{
        //     handleDel(record);
        // }}>删除</a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        params={param}
        headerTitle="分类列表"
        rowKey="id"
        request={queryBrand}
        rowSelection={{
          onChange: (_, selRows) => {
            setSelRows(selRows);
          },
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            onClick={() => {
              handleModalVisible(true);
            }}
          >
            新建
          </Button>,
        ]}
        search={{
          defaultCollapsed: false,
          optionRender: (searchConfig, formProps, dom) => [
            ...dom.reverse(),
            //   <Button
            //     key="out"
            //     onClick={() => {
            //       const values = searchConfig?.form?.getFieldsValue();
            //       handleExportModalVisible(true)
            //     }}
            //   >
            //     导出
            //   </Button>,
          ],
        }}
      ></ProTable>

      {stepFormVals && Object.keys(stepFormVals).length ? (
        <UpdateBrand
          updateModalVisible={updateModalVisible}
          handleModalVisible={() => {
            handleUpdteModalVisible(false);
            setStepFormVals(undefined);
          }}
          onSubmit={async (values) => {
            await handleUpdate({ ...values, id: stepFormVals.id });
          }}
          onCancel={() => {
            handleUpdteModalVisible(false);
            setStepFormVals(undefined);
          }}
          values={stepFormVals}
        >
          {/* <ProTable
                  type="form"
                  columns={columns}
                  form={{initialValues:{
                      ...stepFormVals,
                      productStatus:stepFormVals.productStatus?stepFormVals.productStatus+"":null,
                      productType:stepFormVals.productType?stepFormVals.productType+"":null,
                      receiveType:stepFormVals.receiveType?stepFormVals.receiveType+"":null
                    }}}
                  onSubmit={async (values)=>{
                    await handleUpdate({...values,id:stepFormVals.id})
                  }}
                >
                </ProTable> */}
        </UpdateBrand>
      ) : null}
    </PageContainer>
  );
};

export default BizType;
